<template>
	<div class="rank-list">
 		<music-list :bgImg='bgImg' :songs='songs' :title='title	'></music-list>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { createSong } from 'assets/js/songs'
	import { getRankList } from 'api/rank'
	import MusicList from 'components/music-list/music-list'
	export default{
		data(){
			return {
				filtSongsInfo:[]
			}
		},
		mounted(){
			this.filterInfo()
		},
		computed:{
			...mapGetters([
				'songList'
			]),
			bgImg(){
				return this.songList.picUrl
			},
			songs(){
				return this.filtSongsInfo
			},
			title(){
				return this.songList.topTitle
			}
		},
		methods:{
			filterInfo(){
				if(!this.songList.id){
					this.$router.push({
						path:'/rank'
					})
					return ;
				}else{
					console.log(this.songList)
					getRankList(this.songList.id).then((res)=>{
						res.songlist.forEach((item)=>{
							this.filtSongsInfo.push(createSong(item.data))
							// console.log(this.filtSongsInfo)
						})

					})
				}
				
			}
		},
		components:{
			MusicList
		}
	}
</script>
<style scoped lang='less'>
	@import '~assets/less/variable';
	.rank-list{
		position: fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index: 100;
		background-color: @color-background;
	}

</style>